<!-- 选择教练 -->
<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import DateTabs from '@/uni_modules/hope-11-date-tabs-v3/components/hope-11-date-tabs-v3/hope-11-date-tabs-v3.vue'
	// props
	const props = defineProps({
		show: {
			type: Boolean,
			required: true
		},
		selectTimeRow: {
			type: Object,
			default: () => {}
		}
	})
	// emits
	const emit = defineEmits(['close', 'confirm'])

	// 数据
	const data = reactive({
		couponList: [1, 2, 3],

		timeList: [{
				name: '上午时段',
				timeInterval: [{
						id: 1,
						time: '01:00',
						disabled: ''
					},
					{
						id: 2,
						time: '02:00',
						disabled: ''
					}, {
						id: 3,
						time: '03:00',
						disabled: ''
					}, {
						id: 4,
						time: '04:00',
						disabled: ''
					}, {
						id: 5,
						time: '05:00',
						disabled: ''
					}, {
						id: 6,
						time: '06:00',
						disabled: ''
					}, {
						id: 7,
						time: '07:00',
						disabled: ''
					}, {
						id: 8,
						time: '08:00',
						disabled: ''
					},
					{
						id: 9,
						time: '09:00',
						disabled: ''
					},
					{
						id: 10,
						time: '10:00',
						disabled: ''
					},
					{
						id: 11,
						time: '11:00',
						disabled: ''
					},
					{
						id: 12,
						time: '12:00',
						disabled: ''
					}
				]
			},
			{
				name: '下午时段',
				timeInterval: [{
						id: 13,
						time: '13:00',
						disabled: ''
					},
					{
						id: 14,
						time: '14:00',
						disabled: ''
					},
					{
						id: 15,
						time: '15:00',
						disabled: ''
					},
					{
						id: 16,
						time: '16:00',
						disabled: ''
					},
					{
						id: 17,
						time: '17:00',
						disabled: ''
					},
					{
						id: 18,
						time: '18:00',
						disabled: ''
					},
					{
						id: 19,
						time: '19:00',
						disabled: ''
					},
					{
						id: 20,
						time: '20:00',
						disabled: ''
					},
					{
						id: 21,
						time: '21:00',
						disabled: ''
					},
					{
						id: 22,
						time: '22:00',
						disabled: ''
					},
					{
						id: 23,
						time: '23:00',
						disabled: ''
					}, {
						id: 24,
						time: '24:00',
						disabled: ''
					}
				]
			}
		],

		timeCurrent: undefined,
		value: ''
	})

	// 关闭弹窗
	const close = () => {
		reset()
		emit('close')
	}
	// 还原初始数据
	const reset = () => {
		data.value = ''
	}
	// 确认
	const sure = () => {
		console.log('data.value1.dd ', data.value1.dd, itemCurrent.value);
		emit('confirm', data.value1.dd, itemCurrent.value)
	}

	// 点击时间

	const itemCurrent = ref()
	const timeClick = (item, id) => {
		if (item.disabled === 1) return
		itemCurrent.value = item.time
		data.timeCurrent = id
		console.log('item,id', item, id);
	}

	const year = ref()
	const month = ref()
	const day = ref()
	const date = new Date();
	// 选中日期
	const onDateTabsChange = (e) => {
		console.log(e, 'e')
		data.value1 = e

		const timestamp1 = new Date(e.dd).toLocaleDateString();
		const timestamp2 = new Date(`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`)
			.toLocaleDateString();

		if (timestamp1 > timestamp2) {
			data.timeList.forEach((item, index) => {
				item.timeInterval.forEach((it, index) => {
					it.disabled = ''
				})
			})
		} else {
			console.log('时间置灰');
			// 时间置灰
			timeSettingGray()
		}

	}


	// 时间置灰
	const timeSettingGray = () => {
		const hours = date.getHours();
		const minutes = date.getMinutes();

		data.timeList.forEach((item, index) => {
			item.timeInterval.forEach((it, index) => {
				it.disabled = `${hours}:${minutes}`.localeCompare(it.time)
			})
		})
	}


	onLoad(() => {
		// 时间置灰
		timeSettingGray()
	})
</script>
<script>
	export default {
		options: {
			styleIsolation: "shared"
		},
	};
</script>
<template>
	<!-- 弹窗-选择时间 -->
	<up-popup :show="props.show" :closeable="true" @close="close" :round="10" bgColor="#FFFFFF">
		<view class="Coupon-module">
			<view class="title">
				<text>选择时间</text>
			</view>
			<view class="cnt">
				<scroll-view scroll-y="true" style="height: 920rpx;">
					<view class="list">

						<!-- 日期选择器 -->
						<view class="date-box">
							<DateTabs :value.sync="data.value1" @change='onDateTabsChange'></DateTabs>
						</view>

						<!-- 时间选择器 -->
						<view class="time-box">
							<view class="" v-for="(item,index) in data.timeList " :key="index">
								<view class="title">
									<text>{{item.name}}</text>
								</view>
								<view class="list">
									<scroll-view class="scroll-box" scroll-x="true">
										<view v-for="(item, i) in item.timeInterval" :key="item.id" class="item"
											:class="item.disabled===1? 'disabled' :  data.timeCurrent == item.id ? 'active' : ''"
											@click="timeClick(item,item.id)">
											<view class="cnt">{{ item.time }}</view>
										</view>
									</scroll-view>
								</view>
							</view>


						</view>

					</view>
				</scroll-view>
			</view>
			<!-- 底部栏 -->
			<view class="bottom-bar">
				<view class="content">
					<up-button class="sure-btn" text="确认" type="primary" shape="circle" @click="sure"></up-button>

				</view>
			</view>
		</view>
	</up-popup>
</template>

<style lang="scss" scoped>
	.Coupon-module {
		padding-bottom: 128rpx;



		// background-color: #F6F6F6;
		& .time-box {
			margin-top: 44rpx;

			&>.title {
				text-align: left;
				font-weight: 500;
				font-size: 28rpx;
				color: #303133;
			}

			& .list {

				& .scroll-box {
					// white-space: nowrap;

					& .item {
						display: inline-block;
						margin-right: 12rpx;
						border-radius: 12rpx;
						padding: 2rpx;
						background: linear-gradient(45deg, #93FE9C, #89C695);
						overflow: hidden;

						&.active {
							background: linear-gradient(-30deg, #003A10 0%, #21FF2B 100%);
							color: #FFFFFF;

							& .cnt {
								color: #FFFFFF;
								background: transparent;
							}
						}

						&.disabled {
							opacity: 0.4;
							color: #303133;

							& .cnt {}
						}

						& .cnt {
							padding: 12rpx 24rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #303133;
							border-radius: 12rpx;
							background: #DFFFE8;
							// border: 2rpx solid;
							// border-image: linear-gradient(210deg, #93FE9C, #89C695) 2 2;
						}
					}
				}
			}
		}

		// 标题
		& .title {
			margin-top: 30rpx;
			font-weight: 500;
			font-size: 32rpx;

			color: #303133;
			text-align: center;
		}

		// 内容
		& .cnt {
			box-sizing: border-box;
			// padding: 38rpx 44rpx;
			// margin-top: 32rpx;

			& .list {
				box-sizing: border-box;
				padding: 38rpx 36rpx 0 36rpx;

				& .item {
					margin-bottom: 20rpx;

					&.active {
						background: linear-gradient(180deg, #26BC2E, #2B7330);
						border-radius: 20rpx;
						// padding: 4rpx;


					}

				}
			}
		}

		// 底部栏
		& .bottom-bar {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: 172rpx;
			background: #FFFFFF;
			border-top: 1rpx solid #E9E9EB;

			&::v-deep .content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 12rpx 40rpx;

				& .u-button {
					height: 88rpx;
					width: 620rpx;
					font-weight: 500;
					font-size: 32rpx;
					border-radius: 112rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					background: #303133;
				}
			}
		}

		// 赠送弹窗文字
		& .sure-give-modal {
			margin-top: 20rpx;

			& view {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				text-align: center;
			}
		}
	}
</style>